<template>
  <view>
	<!--                 :style="{
                  'background-color': labelData.extendS1,
                  'color': labelData.extendS2,
                  'fontSize':fontSize
                }" -->
    <view   > 
	 <view :class="cssClass" class="xmlb-item-2"  :style="cssStyle">{{ labelData.dictLabel || '' }} </view>
	</view>
  </view>
</template>

<script>
export default {
	props: {
		value: {},
		dictType: {
			type: String,
			default: ''
		},
        dictList: {
			type: Array,
			default: () => []
		},
        fontSize:{
            type: String,
            default: '28rpx'
        }
	},
	data() {
		return {
			labelData:{
			},
			cssClass:'',
			cssStyle:''
		};
	},
	watch: {
		value(val, oldVal) {
			this.loadData();
		},
		// dictType(val, oldVal) {
		// 	this.loadData();
		// },
	},
	created() {
		setTimeout(() => {
			this.loadData();
		}, 500);
	},
    methods: {
		loadData() {
			try {

				if (this.dictList.length > 0){
			
						let arr = this.dictList.filter(item=>{
							return item.dictValue == this.value
						})

						if(!arr.length){
							this.labelData = {
								extendS1:'',
								extendS2:'',
								dictLabel:''
							}
							this.cssClass = ' '
						}else{
							this.labelData = {
								extendS1:arr[0]['extend'] ? arr[0]['extend']['extendS1'] : '',
								extendS2:arr[0]['extend'] ? arr[0]['extend']['extendS2'] : arr[0]['cssStyle'],
								dictLabel:arr[0]['dictLabel'],
							}
							// this.cssClass = arr[0].cssClass
							// this.cssClass 空格替换成 -
							this.cssClass = arr[0]?.cssClass?.replace(/\s+/g, "-")
							this.cssStyle = arr[0]?.cssStyle
							// this.cssStyle 和'fontSize':fontSize 合并
							if(this.cssStyle){
								this.cssStyle = this.cssStyle + ';font-size:' + this.fontSize
							}else{
								this.cssStyle = 'font-size:' + this.fontSize
							}
						}
					}
			} catch (error) {
			console.error('Error in loadData:', error);
			}

			
		},
		
	
	}
}
</script>

<style>
.xmlb-item-2 {
  padding: 10rpx 16rpx;
  border-radius: 180rpx;
  font-size: 20rpx;
  margin-left: 10rpx;
}
.tag-green {
    color: #389e0d;
    background: #f6ffed;
	border: 1px solid #b7eb8f;
}
.tag-orange {
    color: #d46b08;
    background: #fff7e6;
	border: 1px solid #ffd591;
}
.tag-pink {
    color: #c41d7f;
    background: #fff0f6;
	border: 1px solid #ffadd2;
}
.tag-purple {
    color: #531dab;
    background: #f9f0ff;
	border: 1px solid #d3adf7;
}
.tag-red {
    color: #cf1322;
    background: #fff1f0;
	border: 1px solid #ffa39e;
}
.tag-blue {
    color: #096dd9;
    background: #e6f7ff;
	border: 1px solid #91d5ff;
}
</style>